<template>
  <div class="ComposeMaterial">
    <!-- 顶部内容 -->
    <div class="title_box">
      <div class="memory">
        <a-row justify="space-between" align="middle">
          <a-col style="cursor: pointer; margin-right: 30px">
            <a-tooltip>
              <template #title
                >免费空间： {{ state.capacityToTalFormat }}
              </template>
              {{ state.capacityFormat }} / {{ state.capacityToTalFormat }}
              <span :style="percent >= 100 ? 'color: red' : 'color: #666'">
                (已使用: {{ (state.percent < 1 ? 1 : state.percent) + "%" }})
              </span>
            </a-tooltip>
          </a-col>
          <a-space>
            <a-col style="cursor: pointer" @click="clearClick"
              ><delete-outlined style="margin-right: 5px" />清理</a-col
            >
            <a-col style="cursor: pointer" @click="addMater"
              ><inbox-outlined style="margin-right: 5px" />扩容</a-col
            >
            <a-col style="cursor: pointer" @click="goDowloadCenter"
              ><arrow-down-outlined class="qingli" />下载中心
            </a-col>
          </a-space>
        </a-row>
      </div>
    </div>

    <!-- 头部的搜索栏 -->
    <div class="serch_title">
      <div class="serch_left">
        <a-input
          allow-clear
          @change="(e) => e.type == 'click' && getMediaList()"
          style="width: 247px"
          v-model:value="state.material_name"
          placeholder="请输入关键字搜索"
        >
          <template #prefix>
            <SearchOutlined />
          </template>
        </a-input>

        <!-- 日期  -->
        <a-range-picker
          @change="timeChange"
          format="YYYY-MM-DD"
          style="width: 247px; margin: 0 10px"
          v-model:value="state.time"
          show-time
        />

        <a-button
          type="primary"
          :loading="state.serchLoding"
          @click="getMediaList"
          >查询</a-button
        >
        <a-button
          :loading="state.serchLoding"
          @click="resetSerch"
          style="margin-left: 10px"
          >重置</a-button
        >
      </div>

      <div class="serch_right">
        <a-button style="margin-right: 10px" @click="goTagManage"
          ><tag-outlined /> 标签管理</a-button
        >
        <a-button @click="goItemTag"><tags-outlined />项目标签列表</a-button>

        <!-- <a-button @click="state.showProjectTagList = true"><tags-outlined />项目标签列表</a-button> -->
      </div>
    </div>

    <!-- 项目列表 和 素材列表 -->
    <template v-if="!state.showProjectTagList">
      <div class="content_box">
        <div class="list_item_box">
          <div class="list_item_content_box">
            <div
              v-for="item in state.showMore
                ? state.itemList
                : state.itemList.slice(0, 10)"
              :key="item.id"
              class="list_item_title"
              @click="changeFn(item.id)"
            >
              <span :class="{ active_span: isSelectId == item.id }">{{
                item.name
              }}</span>
            </div>
          </div>

          <div class="switchover" @click="state.showMore = !state.showMore">
            更多项目
            <cu-icon
              :type="
                state.showMore ? 'icon-fangxiangshang' : 'icon-fangxiangxia'
              "
            />
          </div>
        </div>

        <!--  下方的素材列表 -->
        <div class="material_item_box">
          <template v-if="state.materialList">
            <div
              class="file-list"
              ref="containerRef"
              :gutter="{ xs: 8, sm: 16, md: 24 }"
              :wrap="true"
            >
              <a-upload
                :disabled="loading"
                class="model_upload"
                v-model:file-list="fileList"
                :max-count="10"
                :customRequest="customRequest"
                :before-upload="beforeUpload"
                :multiple="true"
                name="file"
                :directory="directory"
                accept=".mp4,.mov,.3gp"
                list-type="picture-card"
              >
                <div class="model_upload_text">
                  <div class="model_upload_top">
                    <plus-outlined
                      style="font-size: 16px; margin-right: 10px"
                    />
                    <div>从本地文件夹选择</div>
                  </div>

                  <div class="model_upload_bottom">
                    <div>
                      支持的视频素材：mov/mp4/3gp（文件≤1G、时长≤60分钟）
                    </div>
                  </div>
                </div>
              </a-upload>

              <!-- 上传中的预览效果 -->
              <div
                class="updatevideo_All"
                v-for="(item, index) in updatevideo"
                :key="index"
              >
                <div class="updatevideo_item">
                  <video
                    :id="item.id"
                    class="updatevideo_item_s"
                    :src="item.url"
                    @click="playVideo(item, index)"
                  ></video>
                  <play-circle-outlined
                    v-show="item.isplayshow"
                    class="play_video"
                    @click="playVideo(item, index)"
                  />

                  <!-- 已上传 -->
                  <div class="up_fin" v-if="item.up_finish == true">
                    <a-tag color="success">已上传</a-tag>
                  </div>
                </div>

                <!-- 进度条  上传中-->
                <div class="progress_item" v-if="item.up_ing == true">
                  <a-progress
                    :percent="isAlionline || isOss ? item.uploadProgress : 100"
                    :showInfo="isAlionline || isOss"
                    type="line"
                    size="small"
                    :stroke-color="{
                      '0%': '#108ee9',
                      '100%': '#87d068',
                    }"
                    status="active"
                  />
                </div>

                <div class="updatevideo_bottom">
                  <div class="updatevideo_bottom_left">
                    {{ item.name }}
                  </div>

                  <div class="updatevideo_bottom_right">
                    <delete-outlined
                      v-if="!loading"
                      class="updatevideo_icon_right"
                      @click="del_up(index)"
                    />
                  </div>
                </div>
              </div>

              <div
                v-for="(item, index) in state.materialList"
                :key="
                  item.id +
                  item.bind_tags.map((ele) => ele.id).join('') +
                  item.spinning
                "
                style="width: 204px"
              >
                <div class="file-item">
                  <!-- 头部 hover显示-->
                  <a-row
                    justify="space-between"
                    class="functional-area"
                    @click="checkbox_click(index)"
                    :style="{
                      display: item.checkedValue ? 'flex' : '',
                      background: item.checkedValue ? 'rgba(0, 0, 0, 0.2)' : '',
                    }"
                  >
                    <a-col @click.stop style="width: 100%">
                      <div
                        style="
                          display: flex;
                          justify-content: space-between;
                          align-items: center;
                          width: 100%;
                        "
                      >
                        <a-checkbox
                          v-model:checked="item.checkedValue"
                          @click="checkbox_click(index)"
                        />
                        <eye-outlined
                          class="icon_eye"
                          @click="itemClick(item, index)"
                        />
                      </div>
                    </a-col>
                  </a-row>

                  <div
                    style="width: 100%"
                    class="content_box"
                    @click="checkbox_click(index)"
                  >
                    <div class="type-box">
                      <!-- 文案 -->
                      <div class="text-box" v-if="item.material_type == 'text'">
                        <div class="text">{{ item.material_name }}</div>
                      </div>
                      <!-- 图片 -->
                      <a-spin
                        :spinning="item.spinning"
                        tip="加载中..."
                        v-if="item.material_type == 'image'"
                      >
                        <div
                          style="width: 100%; height: 204px; overflow: hidden"
                          v-if="item.material_type == 'image'"
                        >
                          <img
                            v-lazy="item.thumb_url"
                            class="image"
                            @load="imageLoaded(item)"
                          />
                        </div>
                      </a-spin>

                      <!-- 视频 -->
                        <div   v-if="item.material_type == 'video'" style="height: 120px">
                          <div style="overflow: hidden;">
                            <img
                              v-if="item.cover_url"
                              v-lazy="item.cover_url"
                              class="image"
                              @load="imageLoaded(item)"
                              style="height: 120px; object-fit: contain"
                            />

                            <img v-else  :src="state.default_corver" alt="" style="width: 35%; height: 100%;  object-fit: cover; 
                            transform: scale(3.0); transform-origin: center;" >

                          </div>
                          <div class="duration">
                            {{ item?.material_duration_text }}
                          </div>
                        </div>
                      <!-- </a-spin> -->

                      <!-- 音频 -->
                      <div
                        v-if="item.material_type == 'audio'"
                        class="audio-box"
                      >
                        <cu-icon type="icon-audio" style="font-size: 40px" />
                        <div class="duration">
                          {{ item?.material_duration_text }}
                        </div>
                      </div>
                      <span
                        class="status_box"
                        style="background: #239842"
                        v-if="item.use_release == 0"
                      >
                        未使用
                      </span>
                      <span
                        class="status_box"
                        style="background: #cf1322"
                        v-if="item.use_release == 1"
                      >
                        已使用
                      </span>
                    </div>
                    <div class="vidoe_msg_box" @click="itemClick(item, index)">
                      <div class="title">
                        <span v-if="!item.isInput" class="text_ellipsis">
                          {{ item.material_name }}
                        </span>

                        <a-input
                          v-else
                          @click.stop
                          v-show="item.isInput"
                          :ref="(el) => (inputRefs[index] = el)"
                          class="ipt"
                          v-model:value="item.material_name"
                          style="width: 100%; height: 25px; margin-top: 5px"
                        >
                          <!-- @blur="blurChange($event, item)" -->
                          <template #suffix>
                            <span
                              class="confirm"
                              style="
                                font-size: 12px;
                                font-weight: 400;
                                margin-right: 5px;
                              "
                              @click.stop="submitEdit(item)"
                              >确定</span
                            >
                            <span
                              class="cancel"
                              style="font-size: 12px; font-weight: 400"
                              @click.stop="cancelEdit(item)"
                              >取消</span
                            >
                          </template>
                        </a-input>

                        <a-popover placement="right">
                          <template #content>
                            <div>
                              <a-button
                                type="text"
                                @click="editNameInput(item, index)"
                                >编辑名称</a-button
                              >
                            </div>
                            <div>
                              <a-button type="text" @click="addTag(item, index)"
                                >添加标签</a-button
                              >
                            </div>
                            <div v-if="$route.name != 'MaterialList'">
                              <a-dropdown :placements="bottomRight">
                                <template #overlay>
                                  <a-menu style="margin-left: 20px">
                                    <a-menu-item
                                      :key="account.key"
                                      v-for="(
                                        account, index
                                      ) in state.accountList"
                                      :disabled="isDisabled(item, account)"
                                    >
                                    <!--  item.relation.length &&
                                        item.relation.some(
                                          (i) => i.key == account.key
                                        ) -->
                                      <!-- (
                                            item.relation.length &&
                                            item.relation.some(
                                              (i) => i.key == account.key
                                            )
                                          ) -->
                                      <div
                                        class="account_item"
                                        @click="!isDisabled(item, account)
                                            ? go_DY_item(account, item, index)
                                            : () => {}
                                        "
                                      >
                                        <img
                                          :src="account.image"
                                          alt=""
                                        /><span>{{ account.value }}</span>
                                      </div>
                                    </a-menu-item>
                                  </a-menu>
                                </template>
                                <a-button type="text"
                                  >发布至平台
                                  <DownOutlined />
                                </a-button>
                              </a-dropdown>
                            </div>
                            <div>
                              <a-button
                                type="text"
                                style="width: 90px; text-align: left"
                                @click="downloadFille('item', item)"
                                >下载</a-button
                              >
                            </div>
                            <div>
                              <a-button
                                type="text"
                                danger
                                style="width: 90px; text-align: left"
                                @click.stop="deleteClick(item)"
                                >删除</a-button
                              >
                            </div>
                          </template>
                          <span @click.stop="() => {}" class="ellipsisOutlined">
                            <EllipsisOutlined />
                          </span>
                        </a-popover>
                      </div>
                      <!-- 底部描述 -->
                      <div class="bottom_msg">
                        <span>{{ item.updated_at }}</span>
                      </div>
                      <!-- 标签 -->
                      <!-- <div class="tags_box" v-if="item.bind_tags && item.bind_tags.length">
                        <a-tag v-for="(item, index) in item.bind_tags" :key="index" style="margin-bottom: 5px">
                          {{ item.tag?.name }}
                        </a-tag>
                      </div> -->
                      <div
                        class="tags_box"
                        v-if="item.relation && item.relation.length"
                      >
                        <div
                          v-for="(ele, index) in item.relation"
                          :key="index"
                          style="margin-bottom: 5px"
                        >
                          <a-tooltip>
                            <template #title>{{ ele.value }}</template>
                            <img
                              @click.stop="publishDetailHandle(item, index)"
                              :src="ele.image"
                              alt=""
                              style="
                                width: 20px;
                                height: 20px;
                                margin-right: 6px;
                              "
                            />
                          </a-tooltip>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>

        <!-- 底部的 分页和发布 -->
        <div class="bottom_box">
          <!-- 分页器 -->
          <div style="display: flex">
            <div class="page-total">共 {{ state.total }} 条</div>
            <a-pagination
              :total="state.total"
              :current="state.page"
              :pageSize="state.pageSize"
              showSizeChanger="true"
              @change="PageChange"
            />
          </div>
        </div>
        <div class="control_btns" v-if="selectItems.length">
          <div class="all_choose">
            <a-checkbox
              :checked="isCheckedAll()"
              @change="checkedAllFn"
              style="margin-right: 10px"
            />
            全选
            <div class="all_choose_text">
              已选择 {{ selectItems.length }} 个视频
            </div>
          </div>
          <a-dropdown :placements="bottomRight">
            <template #overlay>
              <a-menu style="margin-left: 80px">
                <a-menu-item
                  :key="account.key"
                  v-for="(account, index) in state.accountList"
                  :disabled="
                  account.key !== 'weixinshipinhao' &&  mergedResonArray.some((ele) => ele.key == account.key)
                  "
                >
                  <div
                    class="account_item"
                    @click="
                    account.key !== 'weixinshipinhao' &&  mergedResonArray?.some((ele) => ele.key == account.key)
                        ? () => {}
                        : handleMenuClick(account)
                    "
                  >
                    <img :src="account.image" alt="" /><span>{{
                      account.value
                    }}</span>
                  </div>
                </a-menu-item>
              </a-menu>
            </template>
            <a-button :disabled="!selectItems.length" type="primary"
              >发布至平台
              <DownOutlined />
            </a-button>
          </a-dropdown>
          <a-button
            :disabled="!selectItems.length"
            @click="downloadFille('items')"
            >下载</a-button
          >
          <a-button :disabled="!selectItems.length" danger @click="deleteItems"
            >删除</a-button
          >
        </div>
      </div>
    </template>

    <!-- 项目标签列表 -->
    <template v-else>
      <div class="scroll_con" style="overflow-y: scroll; height: 800px">
        <ProjectTagList
          :merchant_library_id="isSelectId"
          :group_id="isSelectId"
          :multimedia_id="state.multimedia_id"
          :projectName="isSelectItem?.name || ''"
          @back="
            () => {
              state.showProjectTagList = false;
            }
          "
        />
      </div>
    </template>
  </div>

  <!-- 详情弹框 -->
  <FileDetailModal
    :visible="state.visibleFileDetai"
    :data="viewItem"
    :index="state.fileIndex"
    @addTagChange="addTag"
    @onClose="fileDetailClose"
    :isPublish="state.isPublish"
    :openType="'chengPianPublish'"
  />

  <!-- 添加标签弹窗 -->
  <tagsModal
    :visible="state.tagVisible"
    :labelInfo="viewItem"
    @close="
      () => {
        state.tagVisible = false;
        getMediaList();
      }
    "
  />

  <!-- 导出弹框 -->
  <ExportMdal
    :visible="state.visibleExport"
    @cacel="state.visibleExport = false"
  />
  <!-- 清理内存 -->
  <CleaningModal
    :visible="visibleCleaning"
    @onCancel="visibleCleaning = false"
    @onSubmit="onSubmitClean"
  />
  <!-- 上传组件 -->
  <UpdateFilmItem
    :visible="UpdatebVisiale"
    :Updateb_name="Updateb_name"
    :group_id="isSelectId"
    :optionsDetail="optionsDetail"
    :PData="itemList"
    @cancel="cancelUpdate"
    @Request="Request"
  />

  <kuarong
    :capacityToTalFormat="state.capacityToTalFormat"
    ref="kuarongRef"
  ></kuarong>

  <!-- 充值弹窗 -->
  <vipModal :visible="vipVisible" @close="vipVisible = false"></vipModal>

  <a-modal v-model:visible="newvisible" title="请选择抖音发布方式">
    <p>
      <span style="font-size: 16px; font-weight: bold"
        >发布方式说明：目前抖音矩阵同时支持2种发布方式。</span
      >
      <br />
      <span
        ><b>扫码发布：</b
        ><br />需要对应账号配合的发布方式，从手机端打开抖音扫码完成发布。</span
      ><br />
      <span
        ><b>立即发布：</b
        ><br />需要先下载客户端进行扫码授权登录，然后发布的时候选择在线账号再进行自动发布。</span
      >
    </p>
    <template #footer>
      <a-button key="qr_code" @click="clickFn('qr_code')">
        <template #icon><QrcodeOutlined /></template>
        扫码发布</a-button
      >
      <a-button key="api" type="primary" @click="clickFn('api')">
        <template #icon><CloudSyncOutlined /></template>
        立即发布</a-button
      >
    </template>
  </a-modal>
</template>

<script setup>
import {
  reactive,
  onMounted,
  onUnmounted,
  watch,
  ref,
  nextTick,
  createVNode,
  defineProps,
} from "vue";
import request from "@/common/utils/request";
import { computed } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";

const router = useRouter();

import { saveAs } from "file-saver";

import { convertToDateOnly } from "@/views/shotstack/MuseMixedCut/utools";

import {
  SearchOutlined,
  DeleteOutlined,
  EllipsisOutlined,
  ExclamationCircleOutlined,
  EyeOutlined,
  CloudUploadOutlined,
  DownOutlined,
  ArrowDownOutlined,
  QrcodeOutlined,
  CloudSyncOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";

// 组件
// 项目标签列表
import ProjectTagList from "@/views/shotstack/tagManage/components/ProjectTagList/index.vue";
import defaultSetting from "@/common/utils/defaultSetting.js";

import tagsModal from "@/views/shotstack/MaterialCenter/modules/tagsModal.vue";

import ExportMdal from "@/views/shotstack/components/ExportMdal/index.vue";
import kuarong from "@/views/shotstack/MaterialCenter/modules/kuarong.vue";

import { message, Modal, Empty, notification } from "ant-design-vue";
import store from "@/store/index.js";
import { upload } from "@/common/utils/uploader/index";

import CleaningModal from "@/views/shotstack/MaterialCenter/modules/CleaningModal.vue";

// 查看素材详情列
import FileDetailModal from "@/views/shotstack/MaterialCenter/modules/FileDetailModal.vue";

import UpdateFilmItem from "@/views/shotstack/MaterialCenter/UpdateFilmItem.vue";
import utils from'@/common/utils/utils.js'

// 充值弹窗
import vipModal from "@/socialMedia/Vip/vipModal.vue";
import { get } from "jquery";
const vipVisible = ref(false);

const props = defineProps({
  isshow: {
    type: Boolean,
    default: false,
  },
});

const kuarongRef = ref(null);

const state = reactive({
  default_corver:  utils.staticPath + "images/workAi/shotstack/default_corver.png",
  activeKey: "1",

  showMore: false, // 项目是否展示更多
  // 已使用空间
  capacityFormat: "",
  // 免费空间
  capacityToTalFormat: "",
  // 已使用空间百分比
  percent: 0,
  // 搜索成片
  material_name: "",
  // 头部项目列表
  itemList: [],
  // 素材列表
  materialList: [],
  // 当前选择的成片项目
  selectId: 0,
  // 是否显示项目标签列表
  showProjectTagList: false,
  // 下载素材弹窗
  visibleExport: false,
  // --
  multimedia_id: "",
  // 查看详情弹窗展示
  visibleFileDetai: false,
  // 添加标签弹窗展示
  tagVisible: false,

  // 查看详情弹窗索引
  fileIndex: 0,
  // 数据总数
  total: 0,
  // 分页器
  page: 1,
  pageSize: 10,
  // 开始结束时间
  time: ["", ""],
  // 搜索用的开始和结束时间
  start_time: "",
  end_time: "",
  // 搜索按钮loding
  serchLoding: false,
  // 当前预览的id
  viewItem_id: "",
  checkedAll: false,

});

const dialog = ref(null);

const work_ai_config = ref({})

onMounted(() => {
   store.dispatch('Getwork_ai_config').then((res)=>{
    work_ai_config.value = res
  })
  if(store.getters?.pageData?.UploadFilm?.page){
    state.page = store.getters.pageData.UploadFilm.page
    state.pageSize = store.getters.pageData.UploadFilm.pageSize
  }
  getItemList();
  getCapacity();
});

const isAlionline = computed(() => {
  return work_ai_config.value?.shotstack_driver == "alionline";
});

const isOss = computed(() => {
  return work_ai_config.value?.upload_driver == "oss";
});
const NoticeFilmRef = ref(null);

const isCheckedAll = () => {
  return state.materialList.every((item) => item.checkedValue);
};

const checkbox_click = (index) => {
  state.materialList[index].checkedValue =
    !state.materialList[index].checkedValue;
  let allChecked = state.materialList.every((item) => item.checkedValue);
  state.checkedAll = allChecked;
};

// 默认返回成片第一个成片项目
const isSelectId = computed({
  get() {
    return typeof state.selectId == "number"
      ? state.selectId
      : state.itemList?.[0]?.id || "";
  },
  set(data) {
    state.selectId = data;
  },
});

// 当前预览的项
const viewItem = computed(() => {
  return state.materialList.find((ele) => ele.id == state.viewItem_id);
});

// 返回当前选择的项目
const isSelectItem = computed(() => {
  return isSelectId.value
    ? state.itemList.find((ele) => ele.id == isSelectId.value)
    : {};
});

// 获取剩余空间
const getCapacity = () => {
  request.get("/work_ai", "/user/shotstack/media/capacity").then((res) => {
    state.capacityFormat = res.capacityFormat;
    state.capacityToTalFormat = res.capacityToTalFormat;
    if (res.capacityToTalBytes >= 1) {
      state.percent = +(
        (Number(res.capacityBytes) / Number(res.capacityToTalBytes)) *
        100
      ).toFixed(1);
      return;
    }
    state.percent = 100;
  });
};

// 分页change事件
const PageChange = (page, pageSize) => {
  state.page = page; //当前页码
  state.pageSize = pageSize; //当前页数
  store.dispatch('setPageData',{UploadFilm:{page,pageSize}})
  state.checkedAll = false;
  state.materialList.forEach((item) => {
    item.checkedValue = false;
  });
  getMediaList();
};

// 获取项目列表
const getItemList = async () => {
  // debugger
  const res = await request.get(
    "/work_ai",
    "/user/shotstack/library/withGroup/list"
  );
  if (res && res.result.length) {
    state.itemList = res.result;
    state.itemList.unshift({
      name: "全部",
      id: 0,
    });
  } else {
    state.itemList = [];
  }
};

// 侦听项目的id, 发送请求
watch(
  () => isSelectId.value,
  (nv) => {
    state.page = 1;
    state.pageSize = 10;
    typeof nv == "number" && getMediaList();
  }
);

const imageLoaded = (item) => {
  item.spinning = false;
};

// 获取成片列表
const getMediaList = async () => {
  if(store.getters?.pageData?.UploadFilm?.page){
    state.page = store.getters.pageData.UploadFilm.page
    state.pageSize = store.getters.pageData.UploadFilm.pageSize
  }
  state.serchLoding = true;
  const params = {
    start_time: state.start_time,
    end_time: state.end_time,
    // 项目id
    merchant_library_id: isSelectId.value,
    // 当前展示的素材类型
    material_type: "video",
    page: state.page,
    pageSize: state.pageSize,
    // 搜索名称
    material_name: state.material_name,
    from: "film",
  };
  try {
    const res = await request.get(
      "/work_ai",
      "/user/shotstack/medias/list",
      params
    );
    // 'weixinshipinhao',
    // res.result.data[0].relation = ['douyin', 'weixinshipinhao']
    state.materialList = res.result.data;
    state.total = res.result.total;
    state.serchLoding = false;
  } catch (error) {
    state.serchLoding = false;
    console.log(error);
  }
};

// 选择日期发生变化
const timeChange = (value, model) => {
  console.log(model, "model");
  state.start_time = model[0];
  state.end_time = model[1];
  // // 日期被设为空值, 重新获取列表数据
  model[0] == "" && model[1] == "" && getMediaList();
};

// 去标签管理页
const goTagManage = () => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true;
  } else {
    router.push({
      name: "TagManage",
      query: { id: "2" },
    });
  }
};

// 去 项目标签列表
const goItemTag = () => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true;
  } else {
    router.push({
      name: "ItemTag",
      query: { id: "2" },
    });
  }
};

// 素材卡片点击
const itemClick = (item, index) => {
  if (item.material_type == "text") {
    previewImg(item);
    return;
  }
  console.log(item, "选择的item");
  // 预览项的id
  state.viewItem_id = item.id;
  state.fileData = item;
  state.fileIndex = index;
  state.visibleFileDetai = true;
};

// 添加标签
const addTag = (item, index) => {
  // state.labelInfo = item;
  // state.labelInfo.index = index;
  state.viewItem_id = item.id;
  state.fileData = item;
  state.fileIndex = index;
  state.tagVisible = true;
};

// 旧的名称
const oldName = ref("");
// 修改名称
const inputRefs = ref([]);
const editNameInput = (item, index) => {
  oldName.value = item.material_name;
  item.isInput = true;
  nextTick(() => {
    inputRefs.value[index].focus();
  });
};

// 修改名称取消
const cancelEdit = (item) => {
  item.material_name = oldName.value;
  item.isInput = false;
};

// 确定修改名称
const submitEdit = (item) => {
  if (!item.material_name.trim()) {
    message.warn("请输入名称");
    return;
  }
  if (item.material_name.length > 20) {
    message.error("素材名称不能超过20个字符");
    return;
  }
  let params = {
    id: item.id,
    material_name: item.material_name,
  };
  request.put("/work_ai", "/user/shotstack/media/name", params).then((res) => {
    message.success("修改成功");
    item.isInput = false;
  });
};

// 当前勾选的素材
const selectItems = computed(() => {
  // if(state.materialList.filter((item) => item.checkedValue).length ! == ) {

  // }

  return state.materialList.filter((item) => item.checkedValue);
});

// 下载素材
const downloadFille = (type, data) => {
  let ids = [];
  if (type == "items") {
    ids = selectItems.value.map((ele) => ele.id);
  } else {
    ids = [data.id];
  }
  request
    .put("/work_ai", "/user/shotstack/media/download", {
      ids,
    })
    .then((res) => {
      state.visibleExport = true;
    });
};

const hasDyConfig =
  store?.state?.shotstack?.work_ai_config?.hasDyConfig || false;

// 单个素材发布至抖音
const go_DY_item = (account, item, index) => {
  if (account?.developing == 1) {
    return message.warning("功能开发中");
  }
  if (account.key == "douyin" && hasDyConfig) {
    choose.value = "1";
    now_KEY.value = account.key;
    now_e.value = item;

    newvisible.value = true;
  } else {
    router.push({
      name: "AutoRelease",
      query: {
        platform: account.key,
        choose: "1",
        id: item.id,
        material_type: item.material_type,
      },
    });
  }
};

// 删除 某项
const deleteClick = (item) => {
  Modal.confirm({
    title: `确定删除 ${item.material_name} 么？`,
    icon: createVNode(ExclamationCircleOutlined),
    cancelText: "取消",
    okText: "确定",
    onOk() {
      request
        .del("/work_ai", "/user/shotstack/media", {
          mediaIds: [item.id],
        })
        .then((res) => {
          // state.groupItem = {};
          message.success("删除成功");
          getMediaList();
        });
    },
  });
};

// 批量删除
const deleteItems = () => {
  Modal.confirm({
    title: `确定删除这些素材吗？`,
    icon: createVNode(ExclamationCircleOutlined),
    cancelText: "取消",
    okText: "确定",
    onOk() {
      request
        .del("/work_ai", "/user/shotstack/media", {
          mediaIds: selectItems.value.map((item) => item.id),
        })
        .then((res) => {
          // state.groupItem = {};
          message.success("删除成功");
          getMediaList();
        });
    },
  });
};


const changeFn = (id) => {
  if (loading.value) {
    return message.warning("视频正在上传中")
  }
  isSelectId.value = id;
};

const UpdatebVisiale = ref(false);
const Updateb_name = ref("");

const openUpdateb = () => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true;
  } else {
    UpdatebVisiale.value = true;

    state.itemList.forEach((item) => {
      if (item.id == isSelectId.value) {
        Updateb_name.value = item.name;
      }
    });
    initUpdateb();
  }
};
const optionsDetail = ref([]);
const initUpdateb = async () => {
  let params = {
    merchant_library_id: isSelectId.value,
    folder_type: "video",
  };
  const res = await request.get(
    "/work_ai",
    "/user/shotstack/folder/select/list",
    params
  );
  optionsDetail.value = res.result;
};

const Request = async (data) => {
  let params = {
    merchant_library_id: data.merchant_library_id,
    folder_type: "video",
  };
  const res = await request.get(
    "/work_ai",
    "/user/shotstack/folder/select/list",
    params
  );
  optionsDetail.value = res.result;
};

// 退出事件   刷新页面
const cancelUpdate = () => {
  UpdatebVisiale.value = false;
  getMediaList();
};
// 清空筛选数据
const resetData = () => {
  state.start_time = "";
  state.end_time = "";
  state.time = [];
  state.page = 1;
  state.pageSize = 10;
  state.merchant_library_id = 0;
  state.material_name = "";
};
const resetSerch = () => {
  resetData();
  getMediaList();
};

watch(
  () => props.isshow,
  (nv) => {
    if (nv) {
      resetData();
      getMediaList();
    }
  },
  {
    immediate: true,
  }
);

const isSubmit = (e, type, ee_info) => {
  if (ee_info == "2") {
    let ids = selectItems.value.map((item) => item.id);
    router.push({
      name: "AutoRelease",
      query: {
        platform: e,
        choose: "2",
        ids,
        type: type,
        material_type: isSelectItem.value.type,
      },
    });
  } else {
    router.push({
      name: "AutoRelease",
      query: {
        choose: "1",
        id: ee_info.id,
        material_type: ee_info.material_type,
        type: type,
        platform: e,
      },
    });
  }
};

// 获取发布成片平台下拉列表
const getAccountList = () => {
  request
    .get("/work_ai", "/org/platform/account/shotStackList", {
      filterShow: 1, //是否过滤掉没有对接的平台 1-是 0-不是
    })
    .then((res) => {
      state.accountList = res.result;
    });
};

getAccountList();
const now_KEY = ref("");
const newvisible = ref(false);
const choose = ref("");
const now_e = ref("");

// 跳转页面  / 判断
const handleMenuClick = (e) => {
  if (e?.developing == 1) {
    return message.warning("功能开发中");
  }
  if (e.key == "douyin" && hasDyConfig) {
    choose.value = "2";
    now_KEY.value = e.key;
    now_e.value = e;
    // NoticeFilmRef.value.showModal(e.key, choose);
    newvisible.value = true;
  } else {
    let ids = selectItems.value.map((item) => item.id);
    router.push({
      name: "AutoRelease",
      query: {
        platform: e.key,
        choose: "2",
        ids,
        material_type: isSelectItem.value.type,
      },
    });
  }
};

const checkedAllFn = () => {
  state.checkedAll = !state.checkedAll;
  if (state.checkedAll == true) {
    state.materialList.forEach((item) => {
      item.checkedValue = true;
    });
  } else {
    state.materialList.forEach((item) => {
      item.checkedValue = false;
    });
  }
};

// 清理内存 弹窗
const visibleCleaning = ref(false);
// 清理内存
const clearClick = () => {
  visibleCleaning.value = true;
};

// 关闭内存弹窗
const onSubmitClean = () => {
  visibleCleaning.value = false;
  getCapacity();
};
// 查看详情组件关闭回调
const fileDetailClose = () => {
  state.isPublish = false;
  state.visibleFileDetai = false;
};
// 查看发布平台
const publishDetailHandle = (item, index) => {
  state.isPublish = true;
  itemClick(item, index);
};
const mergedResonArray = computed(() => {
  if (selectItems.value.length > 0) {
    return selectItems.value.reduce((acc, obj) => {
      return acc.concat(obj.relation);
    }, []);
  }
});
// 去下载中心
const goDowloadCenter = () => {
  router.push({
    name: "Download",
  });
};

// 扩容
const addMater = () => {
  kuarongRef.value.showModal();
};

const clickFn = (type) => {
  if (choose.value == "2") {
    let ids = selectItems.value.map((item) => item.id);
    router.push({
      name: "AutoRelease",
      query: {
        platform: now_KEY.value,
        choose: "2",
        ids,
        type: type,
        material_type: isSelectItem.value.type,
      },
    });
  } else {
    router.push({
      name: "AutoRelease",
      query: {
        choose: "1",
        id: now_e.value.id,
        material_type: now_e.value.material_type,
        type: type,
        platform: now_KEY.value,
      },
    });
  }
};
const BASE_URL = ref("");
const all_file_list = ref([]);
const fileList = ref([]);
const iscount = ref(0);
const queryData = ref({
  files: [],
});
const updatevideo = ref([
  // {
  //   url: "https://shotstack.oss-cn-hangzhou.aliyuncs.com/upload/shotstack/20241228/MId0DiBI2R33kcXYZZKNh.mp4",
  //   name: "65bb3f30d52bc22779.mp4",
  //   id: "vc-upload-1735368508822-2",
  //   isplayshow: true,
  //   up_ing: false,
  //   up_finish: false,
  // },
  // {
  //   url: "https://shotstack.oss-cn-hangzhou.aliyuncs.com/upload/shotstack/20241228/5PReM3gIGkU3NxanaX0-G.mp4",
  //   name: "649974980680572929_649974980680572929_1.mp4",
  //   id: "vc-upload-1735368508822-3",
  //   isplayshow: true,
  //   up_ing: false,
  //   up_finish: false,
  // },
]);

// 上传前的准备
const beforeUpload = async (file, fileList) => {
  // all_file_list.value = fileList
  
  all_file_list.value.push(fileList);
  return new Promise((resolve) => {
    const isLt1G = file.size / 1024 / 1024 / 1024 < 1;
    if (!isLt1G) {
      message.error("视频文件不可大于 1GB!");
      resolve(false);
      return;
    }
    const video = document.createElement("video");
    const blobURL = URL.createObjectURL(file);
    video.src = blobURL;
    video.onloadedmetadata = () => {
      const duration = video.duration;
      const width = video.videoWidth;
      const height = video.videoHeight;

      if (duration > 3600) {
        message.error("视频文件不能大于 60 分钟时长!");
        resolve(false);
        return;
      }

      if (width > 4096 || height > 4096) {
        message.error("视频最大不能超过 4096px!");
        resolve(false);
        return;
      }

      resolve(true);
    };
  });
};

const consumes = ref("");
const unit = ref("");
const unit_name = ref("");
const getnewRule = async (count) => {
  const res = await request.get(
    "/work_ai",
    "/user/shotstack/point/release/get",
    { number: count }
  );
  consumes.value = res.pointInfo.consumes;
  unit.value = res.pointInfo.unit;
  unit_name.value = res.pointInfo.name;
};

// 上传组件  手动上传
const customRequest = async(file) => {
  queryData.value.files.push(file.file);

  const url = URL.createObjectURL(file.file);
  updatevideo.value.push({
    url: url,
    name: file.file.name,
    id: file.file.uid,
    isplayshow: true,
    up_ing: false,
    up_finish: false,
  });

  iscount.value += 1;
  if (iscount.value != all_file_list.value.length) return;
  await getnewRule(all_file_list.value.length);

  Modal.confirm({
    title: "提示",
    icon: createVNode(ExclamationCircleOutlined),
    content: `已添加${updatevideo.value.length}个成片, 预计将消耗${consumes.value}${unit.value}${unit_name.value}, 你确定继续吗?`,
    cancelText: "取消",
    okText: "确定",
    onOk: async () => {
      saveFn();
    },
    onCancel() {
      clearFn();
    },
  });
};

// 删除预览
const del_up = (index) => {
  updatevideo.value.forEach((item) => {
    const videoElement = document.getElementById(item.id);
    if (videoElement) {
      videoElement.pause();
      item.isplayshow = true;
    }
  });
  if (index >= 0 && index < updatevideo.value.length) {
    updatevideo.value.splice(index, 1);
    queryData.value.files.splice(index, 1);
    iscount.value -= 1;

    all_file_list.value.splice(index, 1);
  }

  // getnewRule(updatevideo.value.length);
};

const clearFn = () => {
  updatevideo.value = [];
  all_file_list.value = []
  iscount.value = 0
};

const loading = ref(false);
const isAll_upload = ref(false);
const isUploadComplete = ref(false);
const failed_btn = ref(false);
const isupdate = ref(false);
const noenzu = ref(false);
const SetUploadPath = ref("");
const fileMaxSize = ref("");
const free_send_text = ref("");
const fileMaxSizeErr = ref("");
const ALLshouldContinuePolling = ref(true);

// 保存 上传按钮
const saveFn = async () => {
  await initUpdateb();
  loading.value = true;
  //-----------------------------------cos上传----------------------------------

  BASE_URL.value = defaultSetting.requestDomain;
  if (process.env.NODE_ENV === "development") {
    BASE_URL.value = BASE_URL.value + "/api";
  }
  ALLshouldContinuePolling.value = true;
  const uploadQueue = [];
  const MAX_CONCURRENT_UPLOADS = 3;

  // 检查剩余空间并上传文件
  async function checkSpaceAndUpload(file, index) {
    try {
      // 每次上传前检查剩余空间
      const res = await request.post("/work_ai", "/material/get/capacity");
      const remainingCapacity = parseInt(res.result.remainingCapacity, 10);

      if (remainingCapacity < file.size) {
        // 内存不够  充钱
        message.error(`存储空间不足，无法上传文件：${file.name}`);
        return;
      }
      const formData = new FormData();
      formData.append("file", file);
      formData.append("type", "video");
      formData.append("scene", "video");
      formData.append(
        "merchant_folder_statck_id",
        optionsDetail.value[0].id
      );
      formData.append("org_id", utils.getOrgId());
      formData.append("user_token", utils.getToken());
      formData.append(
        "cur_env",
        utils.isMobile() ? "h5" : import.meta.env.ELECTRON ? "desktop" : "pc"
      );
      formData.append("team_id", utils.getCurrentTeam());
      formData.append("upload_from", "film");

      const response = await axios({
        method: "post",
        url: `${BASE_URL.value}/work_ai/material/upload`,
        data: formData,
        headers: {
          "Content-Type": "multipart/form-data",
          "Org-Token": utils.getToken(),
        },
      });

      if (response?.data?.data?.errorData.length > 0) {
        // 错误处理
        notification.warn({
          message: response.data.data.errorData[0],
          duration: 2,
        });
        loading.value = false;
        updatevideo.value = [];
        queryData.value.files = [];
        return;
      }

      // 上传中状态
      updatevideo.value[index].up_ing = true;
      let pollInterval; // 用于存储setInterval的返回值，以便稍后清除
      let shouldContinuePolling = true;

      // 在上传响应后开始轮询
      const startPolling = () => {
        pollInterval = setInterval(async () => {
          if (!ALLshouldContinuePolling.value) {
            clearInterval(pollInterval); // 如果应停止轮询，则清除定时器
            loading.value = false;
            return;
          }
          if (!shouldContinuePolling) {
            clearInterval(pollInterval); // 如果应停止轮询，则清除定时器
            loading.value = false;
            return;
          }

          try {
            const res = await request.get(
              "/work_ai",
              "/material/upload/status",
              { taskId: response.data.data.returnData[0].taskId }
            );
            if (res.status === 1) {
              // 继续轮询
            } else if (res.status === 2) {
              shouldContinuePolling = false; // 设置标志以停止轮询
              clearInterval(pollInterval); // 清除定时器

              updatevideo.value[index].up_ing = false;
              updatevideo.value[index].up_finish = true;
              const allVideosFinished = updatevideo.value.every(
                (item) => item.up_finish === true
              );
              if (allVideosFinished) {
                // 全部上传成功
                loading.value = false;
                 getMediaList();
              }
            } else if (res.status === 3) {
              // 上传失败  停止轮训
              shouldContinuePolling = false; // 设置标志以停止轮询
              clearInterval(pollInterval); // 清除定时器
              loading.value = false;
              updatevideo.value[index].up_ing = false;
            }
          } catch (error) {
            clearInterval(pollInterval);
            loading.value = false;
             getMediaList();
          }
        }, 2000);
      };

      startPolling();
    } catch (error) {
      console.error("Error during upload:", error);
    }
  }

  // cos上传
  async function startUploads() {
    for (let i = 0; i < queryData.value.files.length; i++) {
      const file = queryData.value.files[i];
      // 将上传任务添加到队列中
      uploadQueue.push(checkSpaceAndUpload(file, i));

      // 如果队列中的任务数量超过了最大并发数，等待队列中的一个任务完成
      if (uploadQueue.length > MAX_CONCURRENT_UPLOADS) {
        await uploadQueue.shift();
      }
    }

    // 等待所有上传任务完成
    await Promise.all(uploadQueue);
  }

  //----------------------------------- oss上传 -------------------------------

  async function processQueue(queue, concurrency) {
    const runningTasks = new Set();
    const results = [];

    const addTask = async () => {
      if (queue.length === 0) {
        return;
      }

      const task = queue.shift();
      const promise = task()
        .then((res) => {
          results.push(res);
          runningTasks.delete(promise);
          addTask();
        })
        .catch((error) => {
          results.push(null);
          runningTasks.delete(promise);
          addTask();
        });

      runningTasks.add(promise);
    };

    for (let i = 0; i < concurrency; i++) {
      addTask();
    }

    while (runningTasks.size > 0 || queue.length > 0) {
      await Promise.race(runningTasks);
    }

    return results;
  }
  let oss_config;
  async function getOss_config() {
    const response = await request.post(
      "/work_ai",
      "/upload/oss/config/ststoken"
    );
    if (response.sts) {
      oss_config = response.sts;
    } else {
      const Reres = await request.post(
        "/work_ai",
        "/upload/oss/config/ststoken",
        {
          isRefresh: "1",
        }
      );
      oss_config = Reres.sts;
    }
  }

  async function getaliinfo() {
    request
      .get("/work_ai", "/material/upload/info", {
        merchant_folder_statck_id: optionsDetail.value[0]?.id,
        upload_from: "",
        number: "1",
      })
      .then((res) => {
        if (res.code == 1001) {
          noenzu.value = true;
        }
        if (res.result) {
          if (res.result.pointInfo.current >= res.result.pointInfo.consumes) {
            SetUploadPath.value = res.result.upload_path;
            fileMaxSize.value = res.result.fileMaxSize;
            free_send_text.value = res.result.free_send_text;
            fileMaxSizeErr.value = res.result.fileMaxSizeErr;
          } else {
            message.error(`${res.result.pointInfo.name}不足, 请充值`);
            noenzu.value = true;
          }
        }
      });
  }

  async function startOssUploads() {
    await getOss_config();

    await getaliinfo();
    let upDataList = queryData.value.files.map((item) => ({
      ...item,
      name: item.name,
      id: item.uid,
      state: 0,
      percent: 0,
      iscancel: false,
    }));

    // 将上传数据 同步至vuex
    store.dispatch("SetUpDateList", upDataList);

    const uploadQueue = queryData.value.files.map((file, i) => async () => {
      updatevideo.value[i].up_ing = true;

      const config = {
        SetUploadPath: SetUploadPath.value,
        oss_config: oss_config,
      };

      const res = await upload(file, config);

      if (res.state == false) {
        updatevideo.value.forEach((v1) => {
          if (v1.name == res.name) {
            v1.up_ing = false;
            v1.up_finish = true;
            v1.isfailed = true;
          }
        });
        if (updatevideo.value.every((item) => item.up_finish == true)) {
          isAll_upload.value = true;
        }
      }

      if (res.fileUrl) {
        let up_paramas = {
          merchant_folder_statck_id: optionsDetail.value[0].id,
          material_type: "video",
          material_name: res.name,
          material_url: res.fileUrl,
          group_id: isSelectId.value,
          material_path: "",
          material_size: file.size,
          material_duration: "",
          width: "",
          height: "",
          oss_media_id: "",
          cover_url: "",
          oss_cover_media_id: "",
          upload_from: "film",
          material_exif: "",
        };

        return request
          .post("/work_ai", "/user/mobile/media", up_paramas)
          .then((res) => {
            updatevideo.value.forEach((v1) => {
              if (v1.name == file.name) {
                v1.up_ing = false;
                v1.up_finish = true;
              }
            });

            if (updatevideo.value.every((item) => item.up_finish == true)) {
              isAll_upload.value = true;
            }
            return res;
          })
          .catch((error) => {
            return null;
          });
      }
    });

    const results = await processQueue(uploadQueue, 2);



    if (results.every((res) => res?.result) && isAll_upload.value) {
      isUploadComplete.value = true;
      updatevideo.value = [];
      isupdate.value = false;
      queryData.value.files = [];
      message.success("上传完成!");
      loading.value = false;
      store.dispatch("SetUpDateList", []);
      getMediaList();
    }

    if (isAll_upload.value && results) {
      isUploadComplete.value = true;
      updatevideo.value = [];
      isupdate.value = false;
      queryData.value.files = [];
      loading.value = false;
      store.dispatch("SetUpDateList", []);
      getMediaList();
    }
  }

  
  if (isAlionline.value || isOss.value) {
    // oss
    startOssUploads();
  } else {
    // cos
    startUploads().catch(console.error);
  }

  
};

// 视频数组
watch(
  () => updatevideo.value,
  (val) => {
    if (val.every((item) => !item.up_ing)) {
      // 全部执行完成
      loading.value = false;
      if (val.some((item) => item.isfailed)) {
        // 重新上传标识
        failed_btn.value = true;
      }
    }

    if (val.every((item) => item.up_finish == true) && !isUploadComplete) {
      isUploadComplete.value == true;
    }
  },
  {
    deep: true,
  }
);

watch(
  () => store.state.user.uploadProgress,
  (val) => {
    updatevideo.value.forEach((v1) => {
      val.forEach((v2) => {
        if (v1.name == v2.filename) {
          v1.uploadProgress = v2.uploadProgress;
        }
      });
    });
  },
  {
    immediate: true,
    deep: true,
  }
);

// 判断 按钮是否禁用
const isDisabled = (item, account) => {
  console.log(account.key, item.relation,  'account.key');
  
  if (account.key == 'weixinshipinhao') {
    return false
  }
  const disable = item.relation.length && item.relation.some((i) => i.key == account.key)
  console.log(disable, '是否禁用');
  
  return  disable
}

</script>

<style lang="less" scoped>
@interval: 20px;

.ComposeMaterial {
  padding: 0 @interval;
  padding-left: 0;

  min-width: 920px;

  // 底部的按钮
  .bottom_box {
    margin-top: 20px;
    display: flex;
    align-content: center;
    justify-content: flex-end;
    padding-bottom: 30px;
  }
  .control_btns {
    position: fixed;
    bottom: 0;
    display: flex;
    gap: 8px;
    transition: opacity 0.4s;
    background-color: #fff;
    align-items: center;
    padding: 20px;
    box-shadow: 0px 12px 16px rgba(0, 0, 0, 0.12),
      0px 6px 8px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
  }
  // 最头部标题和剩余空间
  .title_box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  // 第二层 搜索容器
  .serch_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 10px;
  }

  // 主要的项目列表和素材列表
  .content_box {
    // 头部项目选择列表
    .list_item_box {
      margin: 25px 0;
      display: flex;
      justify-content: space-between;

      .list_item_content_box {
        flex: 1;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .list_item_title {
          padding: 2px 0;
          margin-right: 20px;
          cursor: pointer;
          white-space: nowrap;
          /* 强制文本在一行内显示 */
          overflow: hidden;
          /* 超出部分隐藏 */
          text-overflow: ellipsis;
          /* 超出部分显示省略号 */
          max-width: 21ch;

          /* 限制文本显示的最大字符数为10 */
          span {
            font-size: 15px;
            color: #aaaaaa;

            &.active_span {
              color: #222222;
              font-weight: 600;
            }

            &:hover {
              color: #222222;
              font-weight: 600;
            }
          }
        }
      }

      .switchover {
        min-width: 71px;
        padding: 5px 25px;
        cursor: pointer;
        display: flex;
        align-items: start;
      }
    }

    // 下方素材列表
    .material_item_box {
      // display: flex;
      min-width: 920px;
      .file-list {
        margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(204px, 1fr));
        // overflow: auto;
        min-width: 920px;

        .file-item {
          // background-color: #fff;
          border-radius: 7px;
          overflow: hidden;
          margin-right: 10px;
          margin-bottom: 35px;
          // padding: 5px;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          position: relative;
          cursor: pointer;

          .use_release {
            color: #0076ff;
            background: #d0d0d0;
            border-radius: 5px;
            padding: 2px 4px;
            font-weight: 500;
          }

          .badge {
            position: absolute;
            top: 28px;
            right: 25px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 50%;
            color: #fff;
          }

          .icon-postion {
            position: absolute;
            top: 48px;
            left: 50px;
            font-size: 22px;
            cursor: pointer;
          }

          .functional-area {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 5px;
            z-index: 10;
            align-items: center;

            .preview-menu {
              // width: 48px;
              padding: 2px;
              height: 16px;
              margin-top: 2px;
              display: flex;
              align-items: center;
              justify-content: space-around;
              color: #d0d0d0;

              .icon-style {
                cursor: pointer;
                padding-left: 1.5px;
                font-size: 16px;
                color: #fff;

                &:hover {
                  color: #0076ff;
                }
              }
            }

            display: none;
          }

          &:hover {
            .functional-area {
              display: flex;
              background: rgba(0, 0, 0, 0.2);
              border-top-right-radius: 8px;
              border-top-left-radius: 8px;
            }
          }

          .image-box {
            margin-top: 40px;
            width: 100%;
            text-align: center;

            .image {
              width: 70px;
              height: 70px;
              border-radius: 4px;
              margin: 0 auto;
              position: relative;

              .image-mask {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 70px;
                height: 70px;
                border-radius: 4px;
                background: rgba(0, 0, 0, 0.1);
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                opacity: 0;
                color: #fff;

                .icon-eye-filled {
                  font-size: 24px;

                  &:hover {
                    color: #2878ff;
                  }
                }
              }

              &:hover {
                .image-mask {
                  opacity: 1;
                }
              }

              .durationText {
                position: absolute;
                left: 2px;
                bottom: 0px;
                color: #fff;
              }
            }

            .image-name {
              padding: 0 6px;
              height: 50px;
              padding-top: 5px;
              word-wrap: break-word;
            }

            .image-time {
              font-size: 12px;
              color: #9ea4aa;
            }
          }

          .content_box {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            // 描述容器
            .vidoe_msg_box {
              height: 80px;
              // padding: 12px 12px;
              // height: 100%;

              .title {
                text-align: left;
                font-weight: 700;
                margin-top: 5px;
                display: flex;
                justify-content: space-between;
                position: relative;

                .text_ellipsis {
                  display: inline-block;
                  // max-width: 200px; /* 设置最大宽度，根据需要调整 */
                  flex: 1;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  vertical-align: middle;
                  /* 根据需要调整 */
                }

                .ellipsisOutlined {
                  margin-left: 5px;
                }

                .ipt {
                  .confirm {
                    &:hover {
                      color: #2878ff;
                    }
                  }

                  .cancel {
                    &:hover {
                      color: #0076ff;
                    }
                  }
                }
              }

              // 底部描述
              .bottom_msg {
                text-align: left;
                display: flex;
                justify-content: space-between;
              }

              // 底部标签
              .tags_box {
                text-align: left;
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 7px;

                &:hover {
                  &::-webkit-scrollbar {
                    display: block;
                  }

                  padding-bottom: 0;
                }

                &::-webkit-scrollbar {
                  height: 5px;
                  /* 滚动条的高度，垂直滚动条可能用得上 */
                  display: none;
                }

                &::-webkit-scrollbar-thumb {
                  background: #888;
                  /* 滑块的背景颜色 */
                  border-radius: 5px;
                  /* 滑块的圆角 */
                }
              }
            }

            .type-box {
              width: 100%;
              height: 120px;
              position: relative;
              background-color: #000;
              border-radius: 8px;

              :deep(.ss-spin-nested-loading > div > .ss-spin .ss-spin-text) {
                text-shadow: none;
              }
              .status_box {
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 10;
                background-color: #239842;
                color: #fff;
                font-size: 11px;
                padding: 2px 8px;
                border-radius: 0 8px 0 8px;
              }
              .text-box {
                width: 100%;
                height: 100%;

                color: #fff;
                background: rgba(0, 0, 0, 0.6);
                border-radius: 5px;
                padding: 20px;

                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;

                .text {
                  display: -webkit-box;
                  -webkit-line-clamp: 4;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }

              .image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 8px;
              }

              .video-box {
                width: 100%;
                height: 120px;
                border-radius: 8px;
              }

              .duration {
                position: absolute;
                bottom: 5px;
                right: 8px;
                padding: 0 5px;
                border-radius: 5px;
                background: rgba(0, 0, 0, 0.3);
                color: #fff;
              }

              .status {
                position: absolute;
                bottom: 5px;
                left: 8px;
                padding: 0 5px;
                border-radius: 5px;
                // background: rgba(0, 0, 0, 0.3);
                color: #fff;
              }

              .status_active {
                &:hover {
                  color: var(--ss-primary-color);
                }
              }

              .audio-box {
                height: 100%;
                color: #fff;
                background: rgba(0, 0, 0, 0.6);
                border-radius: 8px;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
      }
    }
  }
}

.icon_eye {
  font-size: 18px;
  margin-right: 8px;
  color: #fff;
}

:deep(.model_upload) {
  height: 165px !important;
  width: 200px !important;
  border-radius: 10px !important;
}

.model_upload_text {
  // margin-top: 40px;
  color: #999;
  font-size: 16px;
}

.isupdating {
  height: 165px;
  width: 200px;
  border-radius: 10px;
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  color: #999;
  font-size: 16px;
  text-align: center;
  padding-top: 60px;
}

.isupdating:hover {
  border: 1px dashed #3261fb;
}

// 发布成片下拉样式
.account_item {
  width: 100px;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 3px, 10px;

  img {
    margin-right: 5px;
    width: 20px;
    height: 20px;
  }
}

.all_choose {
  display: flex;
  align-items: center;
  margin-right: 5px;

  .all_choose_text {
    margin-left: 10px;
    font-size: 14px;
    color: #989898;
    padding-right: 20px;
    border-right: 1px solid #989898;
  }
}

.page-total {
  margin: 5px 10px 0 0;
  font-size: 15px;
  color: #333;
}

.model_upload_text {
  color: #999;
  font-size: 12px;

  .model_upload_top {
    display: flex;
    justify-content: center;
    // margin-top: 27px;
    align-items: center;
  }

  .model_upload_bottom {
    margin: 10px auto;
    width: 176px;
  }
}

.updatevideo_All {
  margin-right: 20px;
  margin-bottom: 10px;
  width: 194px;
  border-radius: 10px;
}

.updatevideo_item {
  // height: 165px;
  width: 194px;
  background-color: #000;
  border-radius: 10px;

  display: flex;
  justify-content: center;
  position: relative;

  .up_fin {
    position: absolute;
    bottom: 10px;
    right: -8px;
  }

  .updatevideo_item_s {
    height: 120px;
    width: 99%;
    // border-radius: 10px;
  }
}

.updatevideo_bottom {
  display: flex;
  justify-content: space-between;

  .updatevideo_bottom_left {
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.updatevideo_icon_right {
  font-size: 16px;
  margin-right: 20px;
}
</style>

<style lang="less">
.ss-upload.ss-upload-select-picture-card {
  height: 164px !important;
  width: 194px !important;
  border-radius: 10px !important;
  margin-right: 20px;
}

.ss-upload-list-picture-card-container {
  display: none !important;
}
</style>
